<template>
	<view :class="isDark?'darkBg':''">
		<cu-custom :bgColor="isDark?'bg-black':'bg-orange'" isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">绩点计算</block>
		</cu-custom>

		<view :class="isDark?'dark':'bg-white'">
			<!-- <view style="height: 545rpx; background-size: cover;  background-position: center;"
				:style="{backgroundImage:isDark?'url(https://web.cloudduolc.cn/image/adblack7.png)':'url(https://web.cloudduolc.cn/image/adwhite5.png)'}">
				<ad unit-id="adunit-57a598d25df8255d" ad-type="video" :ad-theme="isDark?'black':'white'"></ad>
			</view> -->
			<view class="cu-bar  solid-bottom" style="font-weight:bold" :class="isDark?'dark':'bg-white'">
				<view class="action">
					<text class="cuIcon-titles text-orange"></text> 绩点计算
					<text class="cuIcon-search"></text>
				</view>
			</view>

			<view class="action margin-top-xl margin-left-xl margin-bottom-xl">
				<text class="cuIcon-titles text-grey"></text>分数转绩点
				<text class="cuIcon-search"></text>
			</view>
			<view class="cu-form-group justify-center" :class="isDark?'darkIn':'light'">
				<view class="title">分数</view>
				<input v-model="score" maxlength="4" placeholder="(请输入分数)" />
			</view>
			<view class="cu-form-group " :class="isDark?'darkIn':'light'">
				<view class="title">绩点</view>
				<view>{{resultJD}}</view>
			</view>
			<button class="cu-btn round line margin-left-xl margin-top" @click="changeScore"
				style="margin-left: 500rpx;">
				<text class="text-right" :class="isDark?'darkIn':''">转换</text>
			</button>

			<view class="action margin-left-xl margin-bottom-xl">
				<text class="cuIcon-titles text-grey"></text>绩点转分数
				<text class="cuIcon-search"></text>
			</view>
			<view class="cu-form-group justify-center" :class="isDark?'darkIn':'light'">
				<view class="title">绩点</view>
				<input v-model="jd" maxlength="4" placeholder="(请输入绩点)" />
			</view>
			<view class="cu-form-group " :class="isDark?'darkIn':'light'">
				<view class="title">分数</view>
				<view>{{resultScore}}</view>
			</view>
			<button class="cu-btn round line margin-left-xl margin-top" @click="changeJD" style="margin-left: 500rpx;">
				<text class="text-right" :class="isDark?'darkIn':''">转换</text>
			</button>

			<view class="action margin-top-xl">
				<text class="cuIcon-titles text-grey">图片</text>
				<text class="cuIcon-search">来源https://jiaowc.szpt.edu.cn/xszq/cj/cjpd.htm</text>
			</view>
			<img src="https://web.cloudduolc.cn/image/jwjd.png" style="height:870rpx;margin-top:50rpx;width: 900rpx;">
			</imgae>
			<view style="height: 300rpx;"></view>
		</view>

		<zmm-watermark>

		</zmm-watermark>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				isDark: this.isDark,
				score: null,
				resultJD: 0,
				resultScore: 0,
				jd: null
			}
		},
		onShow() {
			let _this = this


		},
		methods: {
			changeScore() {
				if (this.score < 0 | this.score > 100) {
					uni.showToast({
						icon: 'none',
						title: '分数输入错误',
						duration: 2000
					});
					this.resultJD = '分数输入错误'
					return
				}
				if (this.score < 60) {
					this.resultJD = 0
					uni.showToast({
						icon: 'none',
						title: '转换成功',
						duration: 2000
					});
				} else {
					this.resultJD = (1 + (this.score - 60) * (3 / 40)).toFixed(1)
					uni.showToast({
						icon: 'none',
						title: '转换成功',
						duration: 2000
					});
				}

			},
			changeJD() {
				if (this.jd < 0 | this.jd > 4) {
					uni.showToast({
						icon: 'none',
						title: '绩点输入错误',
						duration: 2000
					});
					this.resultScore = '绩点输入错误'
					return
				}
				if (this.jd >= 1) {
					this.resultScore = Math.round((this.jd - 1) / (3 / 40) + 60)
					uni.showToast({
						icon: 'none',
						title: '转换成功',
						duration: 2000
					});
				} else {
					if (this.jd == 0) {
						this.resultScore = "0-59"
						uni.showToast({
							icon: 'none',
							title: '转换成功',
							duration: 2000
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: '绩点输入错误',
							duration: 2000
						});
						this.resultScore = '绩点输入错误'
						return
					}
				}

			},
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
		font-family: 'Courier New', Courier, monospace;
	}

	.smallButton {
		width: 400rpx;
		background-color: #428bca;
		border-color: #357ebd;
		color: #fff;
		-moz-border-radius: 10rpx;
		-webkit-border-radius: 10rpx;
		border-radius: 10rpx;
		/* future proofing */
		-khtml-border-radius: 10rpx;
		/* for old Konqueror browsers */
		text-align: center;
		border: 1rpx solid transparent;
		margin: 0 rpx auto;
		font-size: 37rpx;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 20rpx;
	}
</style>
